<template>
  <div class="counter-warp">
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
      <block v-for="(item, index) in movies" :index="index" :key="key">
        <swiper-item>
          <image :src="item.url" class="slide-image" mode="aspectFill" />
        </swiper-item>
      </block>
    </swiper>

    <p>Vuex counter：{{ count }}</p>
    <p>
      <wux-button @click="increment">
        <wux-icon type="md-arrow-dropup" size="16" />
      </wux-button>
      <!-- <button @click="increment">+</button> -->
      <wux-button @click="decrement">
        <wux-icon type="md-arrow-dropdown" size="16" />
      </wux-button>
      <!-- <button @click="decrement">-</button> -->
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movies: [
        { url: "../static/images/user.png" },
        { url: "../static/images/user.png" }
      ]
    };
  },
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    },
    decrement() {
      this.$store.commit("decrement");
    }
  }
};
</script>

<style lang="less">
.counter-warp {
  text-align: center;
  margin-top: 100px;
  p {
    color: red;
  }
}
.home {
  display: inline-block;
  margin: 100px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}
</style>
